<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	template="/design/template.xhtml">
  <ui:define name="body">

  <h:form id="frmListProducts" prependId="false">
    <p:panel id="pnlListProducts" header="Produtos">

      <p:spacer height="10" />
      <p:messages for="frmListProducts"/>
      <p:dataTable id="tblProduct" value="#{productAction.products}" var="product" style="width:100%;" columnsWidth="12%,33%,45%,10%">
        <p:column style="text-align:center;">
          <f:facet name="header">
            <h:outputText value="Código" />
          </f:facet>
          <h:outputText value="#{product.id}" style="#{!product.activeStatus.active ? 'color: red;' : ''}" />
        </p:column>
        <p:column style="text-align:left;">
          <f:facet name="header">
            <h:outputText value="Nome" />
          </f:facet>
          <h:outputText value="#{product.name}" style="#{!product.activeStatus.active ? 'color: red;' : ''}" />
        </p:column>
        <p:column style="text-align:left;">
          <f:facet name="header">
            <h:outputText value="Descrição" />
          </f:facet>
          <h:outputText id="txtDescription" value="#{product.resumeDescription}" style="#{!product.activeStatus.active ? 'color: red;' : ''}" />
        </p:column>

        <p:column style="text-align:center;">
          <h:commandLink id="lnkEdit" action="#{productAction.prepareEditProduct}" rendered="#{product.activeStatus.active}">
            <h:graphicImage value="/images/action_edit.gif" id="idActionEdit" width="16" height="16" style="border: 0px;" title="editar produto" />
            <f:setPropertyActionListener value="#{product}" target="#{productAction.product}" />            
          </h:commandLink>
          <p:spacer width="5" />
          <p:commandLink id="lnkDesactive" ajaxSingle="true" oncomplete="pnlConfirm.show()" rendered="#{product.activeStatus.active}" update="pnlConfirm">
            <h:graphicImage value="/images/action_desabled.gif" id="idActionDesabled" width="16" height="16" style="border: 0px;" title="excluir produto" />
            <f:setPropertyActionListener value="#{product}" target="#{productAction.product}" />            
            <f:setPropertyActionListener value="#{true}" target="#{productAction.actionDesactive}" />            
          </p:commandLink>
          <p:commandLink id="lnkActive" ajaxSingle="true" oncomplete="pnlConfirm.show()" rendered="#{!product.activeStatus.active}" update="pnlConfirm">
            <h:graphicImage value="/images/action_enabled.gif" id="idActionEnabled" width="16" height="16" style="border: 0px;" title="recasdastrar produto" />
            <f:setPropertyActionListener value="#{product}" target="#{productAction.product}" />            
            <f:setPropertyActionListener value="#{true}" target="#{productAction.actionActive}" />            
          </p:commandLink>
        </p:column>

      </p:dataTable>

      <p:spacer height="10" />
      <p:outputPanel id="pnlButons">
        <div align="right" id="divButons">
          <h:commandLink action="#{productAction.prepareInsertProduct}" value="incluir novo produto" />
        </div>
      </p:outputPanel>			
      <p:spacer height="10" />
	  
      <p:dialog widgetVar="pnlConfirm" header="Confirmação" modal="true" resizable="false" draggable="false" width="250">
        <p:outputPanel id="pnlConfirm">  
        <table width="100%">
          <tbody>
            <tr>
              <td align="center" colspan="2" width="100%">
                <h:outputText value="Confirma #{productAction.actionActive ? 'recadastrar' : 'excluir'} o produto #{productAction.product.id}?" ></h:outputText>
              </td>
            </tr>
            <tr>
              <td align="center" colspan="2" width="100%" height="10"></td>
            </tr>
            <tr>
              <td align="center" width="50%">
                <p:commandButton value="confirmar" action="#{productAction.updateStatusProduct}" update="tblProduct" oncomplete="pnlConfirm.hide();" />
              </td>
              <td align="center" width="50%">
                <p:commandButton value="cancelar" onclick="pnlConfirm.hide();" />
              </td>
            </tr>
          </tbody>
        </table>
        </p:outputPanel>
      </p:dialog>

    </p:panel>
  </h:form>
    
  </ui:define>
</ui:composition>

